<template>
  <div @click="handleClick">
    <div
      class="data-item-box clearfix"
      :style="{cursor: selectable?'pointer':''}"
    >
      <div class="flex-column relative">
        <slot>
          <slot name="body">
            <div class="clearfix item-top">
              <img class="item-img fl" src="../../assets/images/icon-default.png">
              <div class="ml10 fl" style="width: calc(100% - 60px);">
                <div class="item-name">{{ model[baseName] }}</div>
                <!--                <el-tooltip>-->
                <!--                  <div style="width: 200px;" slot="content">{{ model.remark }}</div>-->
                <!--                  <div class="mt10 item-desc">{{ model.remark }}</div>-->
                <!--                </el-tooltip>-->
                <div class="mt10 item-desc textoverflow">
                  <slot name="description">
                    {{ model[description] }}
                  </slot>
                </div>
              </div>
            </div>
          </slot>
          <slot name="action">
            <div class="flex-center item-footer">
              <el-button
                v-for="(item,index) in actions"
                class="flex1 footer-btn"
                type="text"
                :style="{color: danger.indexOf(item) != -1 ? '#FF6867' :'#8D8F8F'}"
                @click.stop="handleFooterAction(index)"
              >{{ item }}
              </el-button>
            </div>
          </slot>
          <div class="item-type">
            <slot name="status">
              <!--              <span class="item-type-green">{{ model.type }}</span>-->
            </slot>
          </div>
        </slot>
        <img class="item-checked" src="../../assets/images/icon-select.png" v-if="checked"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardGridItem',
  props: {
    props: {
      type: Object,
      default: () => {
        return {
          baseName: 'baseName',
          description: 'description'
        }
      }
    },
    selectable: {
      type: Boolean,
      default: true
    },
    model: {
      type: Object,
      default: () => {
        return {}
      }
    },
    actions: {
      type: Array,
      default: () => {
        return []
      }
    },
    danger: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    checked() {
      return this.$parent.checkedValue().indexOf(this.model.baseId) != -1
    },
    baseName() {
      return this.props.baseName || 'baseName'
    },
    description() {
      return this.props.description || 'description'
    }
  },
  methods: {
    handleFooterAction(index) {
      this.$emit('onActionClick', this.model, index)
    },
    handleClick() {
      if (!this.selectable) return false
      this.$emit('select', this.model.baseId, !this.checked)
    }
  }
}
</script>

<style scoped lang="scss">
.data-item-box {
  border-radius: 4px;
  border: 1px solid #EEEEEE;

  &:hover {
    border: 1px solid #3184FF;
  }

  ::v-deep .el-card__body {
    padding: 0;
  }

  .item-top {
    padding: 20px;

    .item-img {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
    }

    .item-name {
      color: #222222;
      font-size: 16px;
      font-weight: bold;
    }

    .item-desc {
      width: 100%;
      height: 21px;
      color: #999999;
      font-size: 14px;
    }
  }

  .item-footer {
    padding: 10px 0;
    background-color: #F7F9FA;

    .footer-btn {
      position: relative;
      margin-left: 0;

      &:not(:last-child)::after {
        content: '|';
        color: #DDDDDD;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }

  .item-checked {
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 0;
    right: 0;
    z-index: 1000;
    //background-color: #F2F2F2;
  }

  .item-type {
    position: absolute;
    padding: 5px 10px;
    top: 0;
    right: 0;
    border-radius: 5px;
  }

  .item-type-green {
    color: #59C230;
    background-color: #F6FFEE;
  }

  .item-type-blue {
    color: #2289BB;
    background-color: #84D4F6;
  }
}
</style>
